<template>
	<view class="stay">
		<view class="card" v-for="(item, index) in list" :key="index" @click="handleStay">
			<view class="card_top">
				<img class="card_img" src="/static/homeIcon.png" alt="" />
				<view class="card_title">
					{{ item.title }}
				</view>
			</view>
			<view class="card_content">
				<view class="pd">
					假期开始时间：{{ item.startTime }}
				</view>
				<view class="pd">
					假期结束时间：{{ item.endTime }}
				</view>
				<view class="pd">
					时长：{{ item.time }}
				</view>
			</view>
			<view class="card_footer">
				<view class="left">
					已登记：{{item.registered}}人
				</view>
				<view class="right">
					未登记：{{item.unregistered}}人
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				list: [
					{
						title: '2024年春节放假',
						startTime: '2023-11-16 00:00:00',
						endTime: '2023-11-16 23:59:59',
						time: '26',
						registered: 0,
						unregistered: 10
					},
					{
						title: '2024年春节放假',
						startTime: '2023-11-16 00:00:00',
						endTime: '2023-11-16 23:59:59',
						time: '26',
						registered: 0,
						unregistered: 10
					},
					{
						title: '2024年春节放假',
						startTime: '2023-11-16 00:00:00',
						endTime: '2023-11-16 23:59:59',
						time: '26',
						registered: 0,
						unregistered: 10
					},
					{
						title: '2024年春节放假',
						startTime: '2023-11-16 00:00:00',
						endTime: '2023-11-16 23:59:59',
						time: '26',
						registered: 0,
						unregistered: 10
					}
				]
			}
		},
		methods: {
			handleStay() {
				uni.navigateTo({
					url: '/pages/stayTab/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.stay{
		width: 94%;
		margin: auto;
		.card{
			padding: 20rpx;
			margin: 20rpx auto;
			border-radius: 10rpx;
			background: #E9F1FF;
			box-shadow: 0px 0px 8rpx 0px rgba(0, 0, 0, 0.2);
			.card_top{
				display: flex;
				align-items: center;
				font-size: 28rpx;
				padding: 10rpx 0rpx;
				.card_img{
					width: 40rpx;
					height: 40rpx;
					margin-right: 16rpx;
				}
			}
		}
		.card_content{
			font-size: 24rpx;
			padding: 20rpx 0rpx;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #ccc;
			color: #5D5E5D;
			.pd{
				padding: 4rpx 0rpx;
			}
		}
		.card_footer{
			padding-top: 20rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			.left{
				color: #686868;
				margin-right: 20rpx;
			}
			.right{
				color: #686868;
				margin-left: 20rpx;
			}
		}
	}
</style>